<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link href="./image/atreez_icon.png" rel="icon" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1011495_1fk79qwdnl.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dialog2.css">
    <link rel="stylesheet" href="./css/address.css">
    <title>Add Address</title>
    <script src="./js/common.js"></script>
    <script src="./js/jquery/jquery.min.js"></script>
    _language
    <script src="./js/history.js"></script>
</head>

<body>
<div class="container add-address">
    <div class="header">
        <div class="heading-title text-center">Add Address</div>
        <ul class="list-inline nav-tabs">
            <li class=""><a href="javascript:history.back(-1);"><i class="iconfont icon-close-line"></i></a></li>
        </ul>
    </div>
    <div class="row content mlr-16">
        <form action="" method="post" id="address-form">
            <div class="name mt-24">
                <div class="title">Full Name</div>
                <input name="name" value="Kota Li" class="form-control mt-5"/>
            </div>
            <div class="phone mt-12">
                <div class="title">Phone Number</div>
                <input name="phone" value="+62 21 7506750" class="form-control mt-5"/>
            </div>
            <div class="area-info mt-12">
                <div class="title">Address Area</div>
                <input name="address_1" value="Kby. Lama, Kota Jakarta Selatan" class="form-control mt-5" readonly/>
            </div>
            <div class="address mt-12">
                <div class="title">Detailed address</div>
                <input name="address" value="Jl. Metro Pondok Indah No.Kav. IV" class="form-control mt-5"/>
            </div>
            <input name="customer_id" type="hidden" value="100">
        </form>

    </div>
    <div class="row footer">
        <div class="btn-default-black text-center btn-submit mlr-16">
            <span>Save</span>
        </div>
    </div>
</div>
<div class="dialog-container" data-spm="dialog">
    <div class="dialog-wrapper"></div>
    <div class="dialog dialog-popup">
        <div class="dialog-close"><i class="iconfont icon-below-line"></i></div>
        <div class="mod_address_slide show" id="addrSelDiv" style="">
            <div class="mod_address_slide_main type_flex">
                <div class="mod_address_slide_body">
                    <ul class="mod_address_slide_tabs_1" id="addrNav">
                        <li level="1" class="cur"><span>Please choose an area</span></li>
                    </ul>
                    <ul class="mod_address_slide_list_2" id="addrList">
                        <li level="city" value="1">Bali</li>
                        <li level="city" value="2">Bangka Belitung</li>
                        <li level="city" value="3">Banten</li>
                        <li level="city" value="4">Bengkulu</li>
                        <li level="city" value="5">DI Yogyakarta</li>
                        <li level="city" value="6">DKI Jakarta</li>
                        <li level="city" value="7">Gorontalo</li>
                        <li level="city" value="8">Jambi</li>
                        <li level="city" value="9">Jawa Barat</li>
                        <li level="city" value="10">Jawa Tengah</li>
                        <li level="city" value="11">Jawa Timur</li>
                        <li level="city" value="12">Kalimantan Barat</li>
                        <li level="city" value="13">Kalimantan Selatan</li>
                        <li level="city" value="14">Kalimantan Tengah</li>
                        <li level="city" value="15">Kalimantan Timur</li>
                        <li level="city" value="16">Kalimantan Utara</li>
                        <li level="city" value="17">Kepulauan Riau</li>
                        <li level="city" value="18">Lampung</li>
                        <li level="city" value="19">Maluku</li>
                        <li level="city" value="20">Maluku Utara</li>
                        <li level="city" value="21">Nanggroe Aceh Daruss</li>
                        <li level="city" value="22">Nusa Tenggara Barat </li>
                        <li level="city" value="23">Nusa Tenggara Timur </li>
                        <li level="city" value="24">Papua</li>
                        <li level="city" value="25">Papua Barat</li>
                        <li level="city" value="26">Riau</li>
                        <li level="city" value="27">Sulawesi Barat</li>
                        <li level="city" value="28">Sulawesi Selatan</li>
                        <li level="city" value="29">Sulawesi Tengah</li>
                        <li level="city" value="30">Sulawesi Tenggara</li>
                        <li level="city" value="31">Sulawesi Utara</li>
                        <li level="city" value="32">Sumatera Barat</li>
                        <li level="city" value="33">Sumatera Selatan</li>
                        <li level="city" value="34">Sumatera Utara</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    $(function () {
        var area = ''
                ,city = '<li level="city" value="1">Bali</li>\
                        <li level="city" value="2">Bangka Belitung</li>\
                        <li level="city" value="3">Banten</li>\
                        <li level="city" value="4">Bengkulu</li>\
                        <li level="city" value="5">DI Yogyakarta</li>\
                        <li level="city" value="6">DKI Jakarta</li>\
                        <li level="city" value="7">Gorontalo</li>\
                        <li level="city" value="8">Jambi</li>\
                        <li level="city" value="9">Jawa Barat</li>\
                        <li level="city" value="10">Jawa Tengah</li>\
                        <li level="city" value="11">Jawa Timur</li>\
                        <li level="city" value="12">Kalimantan Barat</li>\
                        <li level="city" value="13">Kalimantan Selatan</li>\
                        <li level="city" value="14">Kalimantan Tengah</li>\
                        <li level="city" value="15">Kalimantan Timur</li>\
                        <li level="city" value="16">Kalimantan Utara</li>\
                        <li level="city" value="17">Kepulauan Riau</li>\
                        <li level="city" value="18">Lampung</li>\
                        <li level="city" value="19">Maluku</li>\
                        <li level="city" value="20">Maluku Utara</li>\
                        <li level="city" value="21">Nanggroe Aceh Daruss</li>\
                        <li level="city" value="22">Nusa Tenggara Barat </li>\
                        <li level="city" value="23">Nusa Tenggara Timur </li>\
                        <li level="city" value="24">Papua</li>\
                        <li level="city" value="25">Papua Barat</li>\
                        <li level="city" value="26">Riau</li>\
                        <li level="city" value="27">Sulawesi Barat</li>\
                        <li level="city" value="28">Sulawesi Selatan</li>\
                        <li level="city" value="29">Sulawesi Tengah</li>\
                        <li level="city" value="30">Sulawesi Tenggara</li>\
                        <li level="city" value="31">Sulawesi Utara</li>\
                        <li level="city" value="32">Sumatera Barat</li>\
                        <li level="city" value="33">Sumatera Selatan</li>\
                        <li level="city" value="34">Sumatera Utara</li>'
                ,zone_id = '<li level="zone_id" value="1">Bali</li>\
                        <li level="zone_id" value="2">Bangka Belitung</li>\
                        <li level="zone_id" value="3">Banten</li>\
                        <li level="zone_id" value="4">Bengkulu</li>\
                        <li level="zone_id" value="5">DI Yogyakarta</li>\
                        <li level="zone_id" value="6">DKI Jakarta</li>\
                        <li level="zone_id" value="7">Gorontalo</li>\
                        <li level="zone_id" value="8">Jambi</li>\
                        <li level="zone_id" value="9">Jawa Barat</li>\
                        <li level="zone_id" value="10">Jawa Tengah</li>\
                        <li level="zone_id" value="11">Jawa Timur</li>\
                        <li level="zone_id" value="12">Kalimantan Barat</li>\
                        <li level="zone_id" value="13">Kalimantan Selatan</li>\
                        <li level="zone_id" value="14">Kalimantan Tengah</li>\
                        <li level="zone_id" value="15">Kalimantan Timur</li>\
                        <li level="zone_id" value="16">Kalimantan Utara</li>\
                        <li level="zone_id" value="17">Kepulauan Riau</li>\
                        <li level="zone_id" value="18">Lampung</li>\
                        <li level="zone_id" value="19">Maluku</li>\
                        <li level="zone_id" value="20">Maluku Utara</li>\
                        <li level="zone_id" value="21">Nanggroe Aceh Daruss</li>\
                        <li level="zone_id" value="22">Nusa Tenggara Barat </li>\
                        <li level="zone_id" value="23">Nusa Tenggara Timur </li>\
                        <li level="zone_id" value="24">Papua</li>\
                        <li level="zone_id" value="25">Papua Barat</li>\
                        <li level="zone_id" value="26">Riau</li>\
                        <li level="zone_id" value="27">Sulawesi Barat</li>\
                        <li level="zone_id" value="28">Sulawesi Selatan</li>\
                        <li level="zone_id" value="29">Sulawesi Tengah</li>\
                        <li level="zone_id" value="30">Sulawesi Tenggara</li>\
                        <li level="zone_id" value="31">Sulawesi Utara</li>\
                        <li level="zone_id" value="32">Sumatera Barat</li>\
                        <li level="zone_id" value="33">Sumatera Selatan</li>\
                        <li level="zone_id" value="34">Sumatera Utara</li>'
                ,input = ''
                ,from = $('#address-form')
                ,address_one = $('input[name="address_1"]')
                ,close = $('.dialog .dialog-close');

        address_one.click(function () {
            $('#addrNav').find('.cur').prevAll().remove();
//            console.log($('#addrNav').find('.cur').prevAll());
            $('#addrList').empty().append(city);
            $('.dialog-container').addClass('dialog-show')
        })

        close.click(function () {
            $('.dialog-container').removeClass('dialog-show')
        })

        $('#addrList').on('click','li',function () {
            var val = $(this).attr('value')
                    ,level = $(this).attr('level')
                    ,html = $(this).text()
                    ,li = '<li level="'+level+'" class=""><span>'+html+'</span></li>'
                    ,nav = $('#addrNav').find('.cur');
            area += html;
            nav.before(li);
            //ajax 请求  得到  下一级
            $('#addrList').empty().append(zone_id);
            switch(level)
            {
                case 'city':
                    input += '<input name="city" type="hidden" value="'+val+'">';
                    break;
                case 'zone_id':
                    input += '<input name="zone_id" type="hidden" value="'+val+'">';
                    $('input[name="address_1"]').val(html)
                    from.append(input);
                    $('.dialog-close').trigger('click')
                    break;
                default:

            }


        })

        $('.btn-submit').click(function () {
            var t = 1;
            if(t){
                location.href = 'checkout.html';
            }else{
                location.href = 'mypage.html';
            }

        })

    })
</script>
</html>